<template>
  <div class="outerouter">
    <h3>答案详情</h3>
    <ul class="outer">
      <li :key="index" v-for="(item,index) in this.Questions" class="q-item">
        <div style="display:flex">
          <!-- 题号显示 -->
          <span style="margin-top:6px;font-weight:bold;height:100%">{{index+1}}.</span>
          <!-- 题面 -->
          <component v-bind:is="itemTypeTransformer(item.type)" v-bind:question="item">
          </component>
        </div>
        <div class="behind">
          <span>您的答案为:{{item.choice.toString()}}</span>
          <span>正确答案为:{{item.chosen.toString()}}</span>
          <span>得分为:{{item.score}}</span>
        </div>
        <el-divider></el-divider>
      </li>
    </ul>
    <span class="zongfen">总分为:{{totalscore}}</span>
  </div>
</template>
<script>
import QitemCheckbox from "../components/Item/QitemCheckbox.vue";
import QitemLocation from "../components/Item/QitemLocation.vue";
import QitemRadio from "../components/Item/QitemRadio.vue";
import QitemRate from "../components/Item/QitemRate.vue";
import QitemTextBlank from "../components/Item/QitemTextBlank.vue";
export default {
  name: "CorrectAnswer",
  props: ["QID64"],
  data() {
    return {
      QID: this.$AES.decrypt(this.QID64),
      Questions: []
    };
  },
  mounted() {
    this.$serve
      .getCorrectTest(this.QID)
      // this.$serve.getCorrect()
      .then(res => {
        this.Questions = res.data;
      });
  },
  computed: {
    totalscore: function() {
      var a = 0;
      for (var i = 1; i < this.Questions.length; i++) {
        a += this.Questions[i].score;
      }
      return a;
    }
  },
  methods: {
    itemTypeTransformer(type) {
      return this.$mTool.itemTypeTransformer(type);
    }
  },
  components: {
    QitemCheckbox,
    QitemRadio,
    QitemRate,
    QitemTextBlank,
    QitemLocation
  }
};
</script>
<style scoped>
.outerouter {
  width: 1000px;
  /* height: 586px; */
  padding: 15px;
  padding-bottom: 70px;
  margin: 15px auto;
  background-color: rgba(229, 239, 247, 0.87);
  position: relative;
}
.outer {
  list-style: none;
}
.behind {
  display: flex;
  flex-direction: column;
  justify-content: left;
  /* background-color: aqua; */
  padding-top: 5px;
}
.behind span {
  /* background-color: red; */
  text-align: left;
  line-height: 2;
  padding-left: 10px;
}
.zongfen {
  margin-top: 20px;
  font-weight: 600;
  font-size: 17px;
  text-align: left;
  display: block;
  padding-left: 10px;
}
</style>
